<template>
  <div class="app-container">
    <SearchContent :queryParams="queryParams" @query="handleQuery" @reset="resetQuery">
      <el-col :span="6">
        <el-form-item label="催收编号:">
          <el-input v-model="queryParams.code" clearable placeholder="请输入" maxlength="30"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="客户名称:">
          <el-input v-model="queryParams.customerName" clearable placeholder="请输入" maxlength="30"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="处理人:">
          <el-input v-model="queryParams.processedByNames" clearable placeholder="请输入" maxlength="30"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="创建时间:">
          <el-date-picker v-model="foreWarningTime" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="催收进度:">
          <el-select v-model="queryParams.collectionProgress" clearable>
            <template v-for="dict in dict.type.collection_progress">
              <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="客户等级:">
          <el-select v-model="queryParams.customerLevel" clearable>
            <template v-for="dict in dict.type.customer_level">
              <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="客户来源:">
          <el-select v-model="queryParams.customerSource" clearable>
            <template v-for="dict in dict.type.customer_source">
              <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-col>
    </SearchContent>
    <el-card style="margin-top: 10px; margin-bottom: 15px">
      <div style="display: flex; justify-content: start; align-items: center">
        <div style="margin-left: 10px; border: 1px solid #ccc; font-size: 15px; color: #1890ff; width: 160px; height: 35px; line-height: 35px; text-align: center; border-radius: 10px">
          <span style="color: #606266">预计明日回款:</span>
          <span>{{ dataObj.paymentIsExpectedTomorrow }}</span>
        </div>
        <div style="margin-left: 10px; border: 1px solid #ccc; font-size: 15px; color: #1890ff; width: 160px; height: 35px; line-height: 35px; text-align: center; border-radius: 10px">
          <span style="color: #606266">预计今日回款:</span>
          <span>{{ dataObj.paymentIsExpectedToday }}</span>
        </div>
        <div style="margin-left: 10px; border: 1px solid #ccc; font-size: 15px; color: #1890ff; width: 160px; height: 35px; line-height: 35px; text-align: center; border-radius: 10px">
          <span style="color: #606266">超时未处理:</span>
          <span>{{ dataObj.timeoutOutstanding }}</span>
        </div>
      </div>
    </el-card>
    <div class="card-wrap card-padding">
      <table-page :loading="loading" :dataList="dataList" border :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @setSizeCurrent="getList">
        <!-- 操作插槽 -->
        <template slot="tableColAc">
          <el-table-column label="操作" fixed width="200" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button type="text" v-hasPermi="['collectionModule:collectionManage:view']" @click="btn(3, scope.row)">查看</el-button>
              <el-button type="text" v-if="scope.row.canSubmit" v-hasPermi="['collectionModule:collectionManage:strategy']" @click="btn(4, scope.row)">提交催收结果</el-button>
            </template>
          </el-table-column>
        </template>
        <!-- 普通列插槽 -->
        <template slot="tableCol">
          <el-table-column label="催收编号" fixed align="center" prop="code" min-width="200px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.code }}</span>
            </template>
          </el-table-column>
          <el-table-column label="客户名称" align="center" prop="customerName" min-width="200px" show-overflow-tooltip />
          <el-table-column label="客户等级" align="center" prop="customerLevel">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.customer_level" :value="scope.row.customerLevel" />
            </template>
          </el-table-column>
          <el-table-column label="客户来源" align="center" prop="customerSource">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.customer_source" :value="scope.row.customerSource" />
            </template>
          </el-table-column>
          <el-table-column label="累计应收金额" align="center" prop="totalReceivableAmount" min-width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.totalReceivableAmount) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="累计已收金额" align="center" prop="totalReceivedAmount" min-width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.totalReceivedAmount) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="累计待收金额" align="center" prop="totalToBeReceived" min-width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.totalToBeReceived) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="累计销账金额" align="center" prop="totalWriteOffAmount" min-width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.totalWriteOffAmount) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="本月回款金额" align="center" prop="amountOfThisMonth" min-width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.amountOfThisMonth) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="今日回款金额" align="center" prop="amountOfToDay" min-width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.amountOfToDay) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="催收进度" align="center" prop="progressDetail" min-width="200px" show-overflow-tooltip>
            <template slot-scope="scope">
              <!-- <div style="display: flex; justify-content: start; align-items: center">
                <dict-tag :options="dict.type.collection_progress" :value="scope.row.collectionProgress" style="margin-left: 40px" />
                <span v-if="scope.row.isSuspend == 1" style="color: #1890ff"> ({{ scope.row.isSuspend == 0 ? '' : '已暂缓' }})</span>
              </div> -->
              <div>
                <span v-if="scope.row.progressDetail > 6 && scope.row.progressDetail < 26">部分催收中</span>
                <div style="display: flex; justify-content: center; align-items: center">
                  <span v-if="scope.row.progressDetail > 6 && scope.row.progressDetail < 26">(</span>
                  <dict-tag :options="dict.type.collection_detail_progress" :value="scope.row.progressDetail" />
                  <span v-if="scope.row.progressDetail > 6 && scope.row.progressDetail < 26">)</span>
                </div>
                <!-- <span v-if="scope.row.isSuspend == 1" style="color: #1890ff"> ({{ scope.row.isSuspend == 0 ? '未暂缓' : '已暂缓' }})</span> -->
              </div>
            </template>
          </el-table-column>
          <el-table-column label="处理人" align="center" prop="processingByName" min-width="180px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.processingByName }}{{ scope.row.reassignment == 0 ? '' : scope.row.reassignment }}</span>
              <span v-if="scope.row.reassignment == 1" style="color: #1890ff"> ({{ scope.row.reassignment == 0 ? '' : '已改派' }})</span>
            </template>
          </el-table-column>
          <el-table-column label="最新处理时间" align="center" prop="processingTime" min-width="150px" show-overflow-tooltip />
          <el-table-column label="最新预计回款时间" align="center" prop="paybackTime" min-width="150px" show-overflow-tooltip />
          <el-table-column label="最新预计回款金额" align="center" prop="paybackAmount" min-width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.paybackAmount) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="未处理天数" align="center" prop="daysOutstanding" min-width="150px" show-overflow-tooltip />
          <el-table-column label="创建时间" align="center" prop="createTime" min-width="150px" show-overflow-tooltip />
        </template>
      </table-page>
    </div>

    <!-- 添加或修改测试单表对话框 -->
    <el-dialog :title="title" :visible.sync="open" append-to-body class="form-dialog" width="35px%">
      <div style="width: 90%; margin: 0 auto">
        <el-form ref="formDig" label-position="right" :model="formDig" label-width="160px" :rules="rules">
          <el-form-item label="催收策略:" style="margin-left: -90px">
            <div style="display: flex; justify-content: start; align-items: center">
              <span> <dict-tag :options="dict.type.collection_progress" :value="formDig.collectionProgress" /></span>
              <span>{{ text }}</span>
            </div>
          </el-form-item>
          <el-form-item v-if="type == 4" label="催收结果:" prop="collectionResult" style="margin-left: -90px">
            <el-radio-group v-model="formDig.collectionResult">
              <el-radio :label="1">有结果</el-radio>
              <el-radio :label="2">无结果</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="预计回款时间:" prop="paybackTime" v-if="formDig.collectionResult == 1" style="margin-left: -90px">
            <el-date-picker v-model="formDig.paybackTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 40%"> </el-date-picker>
          </el-form-item>
          <el-form-item style="margin-left: -90px" label="预计回款金额:" prop="paybackAmount" v-if="formDig.collectionResult == 1">
            <el-input placeholder="请输入预计回款金额" maxlength="13" @blur="blurNum" v-model="formDig.paybackAmount" @input="formDig.paybackAmount = formDig.paybackAmount.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, '$1')">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item style="margin-left: -90px" label="说明:" prop="remark">
            <el-input type="textarea" placeholder="请输入说明内容" v-model="formDig.remark" maxlength="500" :rows="5" show-word-limit> </el-input>
          </el-form-item>
          <el-form-item style="margin-left: -90px" label="附件:" prop="attachments">
            <ImageCommon :up-type="2" info="选择附件" :limit="5" v-model="formDig.attachments"></ImageCommon>
          </el-form-item>
          <p>如下订单: 处于委外收车或者司法诉讼阶段</p>
          <table-page :loading="loadingTableWW" :dataList="dataListTableWW" border :total="totalTableWW" :page.sync="queryParamsDigWW.pageNum" :limit.sync="queryParamsDigWW.pageSize" @setSizeCurrent="getListTableWW">
            <!-- 普通列插槽 -->
            <template slot="tableCol">
              <el-table-column label="主订单编号" align="center" prop="orderNo" min-width="150px" show-overflow-tooltip />
              <el-table-column label="子订单编号" align="center" prop="orderCarNo" min-width="150px" show-overflow-tooltip />
              <el-table-column label="车牌号" align="center" prop="carNo" />
              <el-table-column label="催收进度" align="center">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.collection_progress" :value="scope.row.collectionProgress" />
                </template>
              </el-table-column>
            </template>
          </table-page>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="cancelDig">取消</el-button>
        <el-button type="primary" @click="submitForm">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SearchContent from '@/components/SearchContent/index.vue'
import { getCollectionHandleList, saveCollectionHandle, atSoFoJpList, collectionHandleDetail } from '@/api/collectionModule'

export default {
  name: 'CollectionHandle',
  components: {
    SearchContent,
  },
  dicts: ['collection_progress', 'collection_detail_progress', 'customer_level', 'customer_source'],
  data() {
    return {
      queryParamsDigWW: {
        pageNum: 1,
        pageSize: 10,
      },
      loadingTableWW: false,
      dataListTableWW: [],
      totalTableWW: 0,
      title: '',
      loadingTable: false,
      totalTable: 0,
      rules: {
        collectionResult: [{ required: true, message: '请选择催收结果', trigger: 'change' }],
        remark: [{ required: true, message: '请输入说明', trigger: 'blur' }],
        paybackTime: [{ required: true, message: '请选择预计回款时间', trigger: 'blur' }],
        paybackAmount: [{ required: true, message: '请输入预计回款金额', trigger: 'blur' }],
      },
      foreWarningTime: [],
      // 遮罩层
      loading: true,
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        // code: this.$route.query?.code ? this.$route.query.code : this.queryParams?.code,
      },
      queryParamsDig: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      dataList: [],
      // 表单参数
      formDig: {},
      type: null,
      text: '',
      dataObj: {},
    }
  },
  created() {
    this.getList()
    this.collectionHandleDetail()
    this.queryParams = {
      ...this.queryParams,
      code: this.$route.query?.code ? this.$route.query.code : this.queryParams?.code,
    }
  },
  methods: {
    blurNum() {
      console.log(this.formDig.paybackAmount, 'this.formDig.paybackAmount')
      if (this.formDig.paybackAmount < 0.01) {
        this.$set(this.formDig, 'paybackAmount', '0.01')
      } else if (this.formDig.paybackAmount > 999999999.99) {
        this.$set(this.formDig, 'paybackAmount', '999999999.99')
      }
    },
    // 委外收车列表
    async getListTableWW() {
      this.loadingTableWW = true
      let params = {
        ...this.queryParamsDigWW,
        manageId: this.formDig.manageId,
      }
      try {
        let res = await atSoFoJpList(params)
        const { rows, total } = res
        this.dataListTableWW = rows
        this.totalTableWW = total
        this.loadingTableWW = false
      } catch (error) {}
    },
    collectionHandleDetail() {
      collectionHandleDetail(this.queryParams).then((res) => {
        if (res.code == '200') {
          this.dataObj = { ...res.data }
        }
      })
    },
    // 多选按钮
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    cancelDig() {
      this.open = false
    },
    // 导出
    /** 预警配置 */
    btn(type, row) {
      this.type = type
      this.open = true
      this.$set(this, 'formDig', {})
      this.$refs['formDig']?.clearValidate()
      if (type == 4) {
        this.title = '提交催收结果'
        this.text = row.isSuspend == 0 ? '' : '(已暂缓)'
        let collectionProgress = `${row.collectionProgress}`
        this.$set(this.formDig, 'handleId', row.id)
        this.$set(this.formDig, 'manageId', row.manageId)
        this.$set(this.formDig, 'collectionProgress', collectionProgress)
        this.getListTableWW()
      } else if (type == 3) {
        this.open = false
        this._toPage({
          name: 'InitiateACollectionDetailResult',
          query: {
            type: 'detailView',
            beFrom: 'CollectionHandle',
            id: row.id,
          },
        })
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['formDig'].validate((valid) => {
        if (valid) {
          this.open = false
          if (this.type == 4) {
            // 接口
            saveCollectionHandle(this.formDig).then((res) => {
              if (res.code == '200') {
                this.$message.success('提交成功')
                this.getList()
                this.collectionHandleDetail()
              }
            })
          }
        }
      })
    },
    /** 查询测试单表列表 */
    getList() {
      this.loading = true
      getCollectionHandleList(this.queryParams).then((res) => {
        if (res.code == '200') {
          const { rows, total } = res
          this.dataList = rows
          this.total = total
          this.loading = false
        }
      })
    },
    // 清空校验
    clearCheck() {
      this.$refs['form'] && this.$refs['form'].resetFields()
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.clearCheck()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.queryParams.startTime = this.foreWarningTime[0]
      this.queryParams.endTime = this.foreWarningTime[1]
      this.getList()
      this.collectionHandleDetail()
    },
    handleQueryDig() {
      this.queryParamsDig.pageNum = 1
    },
    /** 重置按钮操作 */
    resetQuery() {
      ;(this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      }),
        (this.foreWarningTime = [])
      this.handleQuery()
    },
    resetQueryDig() {
      this.queryParamsDig = {
        pageNum: 1,
        pageSize: 10,
      }
      console.log('1')
    },
  },
}
</script>
<style lang="scss" scoped>
.pagination-container {
  padding: 0 20px 50px !important;
}
.blue {
  color: #1890ff !important;
  cursor: pointer;
}
</style>
